<template>
  <div class="FontBase">
    <el-dialog title="个人信息" :visible.sync="mShowMainDialog" width="30%">
      <el-row style="text-align: center;">
        <el-image
          style="width: 200px; height: 200px"
          src="http://image.biaobaiju.com/uploads/20181025/19/1540467459-SyjbRrcmoA.jpg"
        ></el-image>
      </el-row>
      <el-row style="text-align: center;margin-top:10px">
        <span style="font-size:18px;font-weight:bold">{{mPersonInfo.name}}</span>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mMdfyPassDialog = true">
          <span class="FontBase">修改密码</span>
        </el-button>
        <el-button type="danger" @click="loginout()">
          <span class="FontBase">退出登录</span>
        </el-button>
      </span>
    </el-dialog>
    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" :visible.sync="mMdfyPassDialog" width="50%">
      <el-form label-width="80px">
        <el-form-item label="原密码">
          <el-input v-model="mMdfypasForm.oldPass"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="mMdfypasForm.newPass"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="mMdfypasForm.newPass1"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mMdfyPassDialog = false">
          <span class="FontBase">取消</span>
        </el-button>
        <el-button type="primary" @click="mdfyPass()">
          <span class="FontBase">确认修改</span>
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>>

<style  scoped>
@import "../../assets/css/base.css";
</style>
<script>
import {
  getRequestHeader,
  getUserDetailApi,
  mdfyPassApi,
  loginOutApi
} from "../../api/user.js";
import { logxApi } from "../../api/util.js";
import { Table } from "element-ui";
export default {
  data() {
    return {
      mShowMainDialog: false,
      mMdfyPassDialog: false,
      mPersonInfo: {},
      mMdfypasForm: {}
    };
  },
  created() {},
  mounted() {
    var that = this;
    getUserDetailApi(
      getRequestHeader(),
      new (function() {
        this.fail = function(msg) {};
        this.success = function(data) {
          logxApi(data);
          that.mPersonInfo = data;
        };
      })()
    );
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    showMainDialog() {
      this.mShowMainDialog = true;
    },
    mdfyPass() {
      var that = this;
      if (!this.mMdfypasForm.oldPass) {
        that.$message.error("请输入原密码");
        return;
      }
      if (!this.mMdfypasForm.newPass) {
        that.$message.error("请输入新密码");
        return;
      }
      if (!this.mMdfypasForm.newPass1) {
        that.$message.error("请输入确认密码");
        return;
      }
      if (this.mMdfypasForm.newPass1 != this.mMdfypasForm.newPass) {
        that.$message.error("两次输入密码不一致");
        return;
      }
      that.showFullLoading();
      mdfyPassApi(
        this.mMdfypasForm.newPass,
        this.mMdfypasForm.oldPass,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mMdfyPassDialog = false;
            that.$message.success("修改成功");
          };
        })()
      );
    },
    loginout() {
      location.reload();
      loginOutApi(
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {};
          this.success = function(data) {};
        })()
      );
      // this.window.reload();
      // location.reload();
      
    }

    // end m
  }
};
</script>>